<template>
    <div>
      <MHeader >首页</MHeader>
      <div class="content">
        <loading v-if="loading"></loading>
        <template v-else>
          <Swiper :swiperSlides="sliders"></Swiper>
          <section class="container">
            <h3>热门图书 <i class="iconfont icon-huo"></i> </h3>
            <ul>
              <router-link :to="{name:'detail',params:{bid:book.bookId}}" v-for="(book,index) in hotBooks" :key="index" tag="li">
                <img :src="book.bookCover" alt="">
                <p class="ellipsis">{{book.bookName}}</p>
              </router-link>
            </ul>
          </section>
        </template>
      </div>
    </div>
</template>
<script>
  import MHeader from '../base/MHeader.vue';
  import Swiper from '../base/Swiper.vue';
  import {getAll} from '../api';
  import loading from '../base/loading.vue';
    export default {
        data() {
            return {sliders:[],hotBooks:[],loading:true}
        },
        created() {
          this.getData();
        },
        methods: {
          async getData(){
            let [a,b]=await getAll();
            this.loading=false;
            this.sliders = a;
            this.hotBooks = b;
          },
        },
        computed: {},
        components: {
          MHeader,
          Swiper,
          loading,
        }
    }
</script>
<style scoped lang="scss">
@import "../css/container.scss";
body,html{background:#eee;}
  .content{
    position:relative;
    top:.7rem;
    margin-bottom: 1.2rem;
    .container{
      h3{
        border-radius:$br;
        background:#fff;
        color:$cs;
        text-align:center;
        i{
          font-size:.2rem;
          color:red;
        }
      }
      ul{
        box-sizing:border-box;
        padding: 0 .3rem;
        li{
          align-items:center;
          display:inline-block;
          width: 48.5%;
          box-sizing: border-box;
          border: .01rem solid #c5bcbc;
          vertical-align: top;
          padding: 0 .1rem;
          margin-bottom: .3rem;
          &:nth-child(2n){
            margin-left: 3%;
          }
          img{
            width: 100%;
          }
          p{
            width: 100%;
          }
        }
      }
    }
  }
</style>
